<template>
  <div class="container">
    <Headbar />
    <Header />
    <Nav />
    <div class="problems-box">
      <div class="problems-wrap yh-layout-box">
        <div class="problems-menu fl">
          <Menu />
        </div>
        <div class="problems-classify fl">
          <div class="help-crumb">
            <div class="help-crumb-content">
              <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/help/' }" >帮助中心</el-breadcrumb-item>
                <el-breadcrumb-item v-if="data.list.length===0"></el-breadcrumb-item>
                <el-breadcrumb-item v-if="data.list.length>0 && title!=''">关于“{{title}}”，共找到 {{data.total}} 相关问题</el-breadcrumb-item>
                <el-breadcrumb-item v-if="data.list.length>0 && tradeName !=null" >{{tradeName}}</el-breadcrumb-item>
                <el-breadcrumb-item v-if="data.list.length>0 && childName !=null"  :to="{ path: '/help/detail?title='+childName }" >{{childName}}</el-breadcrumb-item>
              </el-breadcrumb>
              <span class="find-statistics"></span>
            </div>
          </div>
          <div class="article-detail">
            <div class="article-content" v-if="displayContext === false">
              <div class="article-text" v-for="(item,index) in data.list" >
                <p class="article-paragraph" @click="detailOpen(item.id)">· {{item.title}}</p>
<!--                <p class="article-tips" v-html="item.content"></p>-->
              </div>
<!--              <template v-if="data.list.length>0 && title!=null">-->
<!--                <div class="block">-->
<!--                  <el-pagination-->
<!--                          @size-change="handleSizeChange"-->
<!--                          @current-change="handleCurrentChange"-->
<!--                          :current-page="page"-->
<!--                          :page-sizes="[100, 200, 300, 400]"-->
<!--                          :page-size="100"-->
<!--                          layout="total, sizes, prev, pager, next, jumper"-->
<!--                          :total="400">-->
<!--                  </el-pagination>-->
<!--                </div>-->
<!--              </template>-->

              <div v-if="data.list.length===0 && title!=null ">
                很抱歉，我们暂时无 “{{title}}” 的相关信息，请您重新搜索。
              </div>
            </div>
            <div class="article-content" v-if="displayContext === true">
              <div class="article-headTitle">{{content.title}}</div>
              <div class="article-text">
                <p class="article-tips" v-html="content.content"></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footbars />
  </div>
</template>

<script>
import Header from './components/Header'
import Nav from './components/Nav'
import Menu from './components/Menu'
import Headbar from '@/components/Layouts/Headbar'
import Footbars from '@/components/Layouts/Footbars'
import {getSelectContentList} from '@/api/news'

export default {

  name: 'HelpDetail',
  components: {
    Header,
    Nav,
    Menu,
    Headbar,
    Footbars,
  },
  data() {
    return {
      content:null,
      tradeName:null,
      tradeId:null,
      childName:null,
      displayContext:false,
      size: 20,
      page: 1,
      title:null,
      data:{
        list:[],
      },
    }
  },
  watch: {
    $route(to, from) {
      var id = to.query.Id;
      var title = to.query.title;
      if(id ===undefined || id === null){
          id = 0;
      }
      if(title ===undefined){
        title = '';
      }
      this.title = title;
      this.getList(id,title);
    }
  },
  created() {
    var id = this.$route.query.Id;
    var title = this.$route.query.title;
    if(id ===undefined || id === null){
       id = 0;
    }
    if(title ===undefined){
        title = '';
    }
    this.tradeId = id;
    this.title = title;
    this.getList(id,title);
  },
  methods: {
    getList(id,titleName){
      this.displayContext = false;
      this.data.list = [];
      this.tradeName = null;
      this.childName = null;
      if((titleName === undefined || titleName === '') && (id === '' || id === 0 )){
         return false
      }

      var params = {
        tradeId:id,
        size:this.size,
        page:this.page,
        keyWord:titleName,
      }
      getSelectContentList(params).then(res =>{
          this.data = res.data;
          if(this.title === null || this.title === '' && this.data.list[0]!=null){
              this.tradeName = this.data.list[0].tradeName;
              this.childName = this.data.list[0].childName;
          }
      });
    },
    detailOpen(item){
        this.displayContext = true;
        const index = this.data.list.findIndex(d => d.id === item);
        this.content = this.data.list[index];
    }
  }
}
</script>

<style lang="scss" scoped>
.problems-box{
  .problems-wrap{
    .problems-menu{
      width: 220px;
    }
    .problems-classify{
      width: 970px;
      min-height: 600px;
      background: #fff;
      border-radius: 10px;
      margin: 20px 0 20px 10px;
      .help-crumb{
        width: 100%;
        height: 48px;
        line-height: 48px;
        background: #E9E9E9;
        border-radius: 10px 10px 0 0;
        .help-crumb-content{
          max-width: 100%;
          height: 100%;
          color: #888;
          font-size: 14px;
          padding-left: 30px;
          vertical-align: top;
          .el-breadcrumb{
            display: inline-block;
            line-height: unset;
          }
        }
        .find-statistics{
          vertical-align: top;
          display: inline-block;
          height: 48px;
          line-height: 48px;
          margin-left: 15px;
        }
      }
      .article-detail{
        padding: 30px;
        .article-content{
          .article-headTitle{
            height: 45px;
            line-height: 45px;
            border-bottom: 1px dashed #eee;
            color: #255B8B;
            font-size: 16px;
            font-weight: bold;
          }
          .article-text{
            margin-bottom: 40px;
            .article-paragraph{
              color: #333;
            }
            .article-paragraph:hover{
              content: "";
              cursor: pointer;
              color: #0a76a4;
            }
            .article-tips{
              color: #666;
              padding: 0 10px;
              line-height: 25px;
              img{
                width:100%;
              }
            }
          }
          .article-text:last-child{
            margin-bottom: 20px;
          }
        }
      }
    }
  }
}
</style>
<style lang="scss">

.el-breadcrumb__item{
  .el-breadcrumb__inner{
    color: #888;
  }
}
.el-breadcrumb__item:last-child{
  .el-breadcrumb__inner{
    color: #888;
  }
}
.article-detail{
  img{
    max-width:100%;  }
}
</style>
